<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>上传图片</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta content="telephone=no,email=no" name=format-detection />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="renderer" content="webkit|ie-comp|ie-stand" />
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
	<script src="https://biz.jd.com/dist/js/jquery-2.1.4.min.js"></script>
	
	<style>
        /* 去除浏览器默认样式reset */
        html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font-weight: normal;
            vertical-align: baseline;
            background: transparent;
            -webkit-tap-highlight-color:rgba(255,255,255,0);
        }
        html, body {
            width: 100%;
            height: 100%;
            font-size: 0.28rem;
        }
        main, article, aside, figure, footer, header, nav, section, details, summary {display: block;}
        ul {list-style: none;}
        table {border-collapse: separate; border-spacing: 0;}
        th {font-weight: bold; vertical-align: bottom;}
        td {font-weight: normal; vertical-align: top;}
        input{
            outline: none;
            border: none;
        }
		#app{
			background-color: #f5f5f5;
		}
		.container{
			height: calc(100vh - 60px);
			overflow-y: auto;
			padding: 10px;
			box-sizing: border-box;
		}
		.orderDetail{
			background-color: #fff;
			border-radius: 4px;
			padding: 15px 15px 5px;
			box-sizing: border-box;
		}
		.item{
			color: #514d5b;
			font-size: 13px;
			margin-bottom: 10px;
		}
		.washImage{
			margin-top: 10px;
			padding: 15px;
			border-radius: 4px;
			background-color: #fff;
		}
		.uploadBox{
			width: 100px;
			height: 100px;
			border-radius: 4px;
			border: 1px dashed #989898;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;
			color: #989898;
		}
		.bottomButton{
			height: 60px;
			position: fixed;
			bottom: 0;
			width: 100%;
			background-color: #fff;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10px;
			box-sizing: border-box;
		}
		.button{
			text-align: center;
			width: 120px;
			height: 40px;
			background-color: #2d8cf0;
			color: #fff;
			line-height: 40px;
			border-radius: 9px;
		}
		#message {
		  display: none;
		  position: fixed;
		  top: 50%;
		  width: 120px;
		  left: calc(50% - 60px);
		  margin: auto;
		  padding: 10px;
		  background-color: rgb(0 0 0 / 20%);
		  border-radius: 6px;
		}
		#message1 {
		  display: none;
		  position: fixed;
		  top: 50%;
		  width: 120px;
		  left: calc(50% - 60px);
		  margin: auto;
		  padding: 10px;
		  background-color: rgb(0 0 0 / 20%);
		  border-radius: 6px;
		}
	</style>
</head>
<body>
	<div id="app">
		<input type="file" id="file" @change="uploadImage" style="display: none;" />
		<div class="container">
			<div class="orderDetail">
				<div class="item">订单号：{{info.order_no}}</div>
				<div class="item">用户姓名：{{info.consumer?.name}}</div>
				<div class="item">联系方式：{{info.consumer?.phone}}</div>
				<div class="item">订单金额：{{info.payment}}</div>
				<div class="item">衣服件数：{{info.wash_num}}</div>
				<div class="item">衣服类别：{{info.leibie}}</div>
				<div class="item">清洗方式：普洗</div>
			</div>
			<div class="washImage" v-for="(item,index) in info.pics" :key="index">
				<div style="display: flex;justify-content: space-between;">
					<div>第{{index+1}}件</div>
					<div style="font-size: 12px;color: #2d8cf0;" @click="addUPploadImage(index)">添加照片</div>
				</div>
				<div style="display: flex;overflow-x: auto;">
					<div v-for="(demo,idx) in item.image" :key="index" style="margin-top: 10px;margin-right: 10px;">
						<div @click="selectImage(index,idx)" class="uploadBox">
							<img style="width: 100%;height: 100%;" v-if="demo.img" :src="demo.img" alt="">
							<div v-else> +</div>
						</div>
						
					</div>
				</div>
			</div>
			<!-- <div @click="addPics" style="text-align: center;padding: 20px;color: #2d8cf0;">添加衣物</div> -->
			<div class="bottomButton">
				<div style="font-size: 14px;">
					<div style="margin-bottom: 4px;font-weight: bold;">当前订单共{{getNum}}件衣物</div>
					<div style="font-weight: bold;">已录入{{getAllNum}}件</div>
				</div>
				<div class="button" @click="submit">提交</div>
			</div>
			<div id="message">请录入衣物！</div>
			<div id="message1">提交成功！</div>
		</div>
	</div>
<script>
// 引入rem，使用rem单位，对不同手机屏幕进行适配
(function (doc, win) {
    var docEl = doc.documentElement
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
    var recalc = function () {
        var clientWidth = docEl.clientWidth
        if (!clientWidth) return
        if (clientWidth >= 750) {
            docEl.style.fontSize = '100px' // 1rem  = 100px
        } else {
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'
        }
    }
    if (!doc.addEventListener) return
    win.addEventListener(resizeEvt, recalc, false)
    doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

// 截取url指定参数
function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg);  //匹配目标参数
    if (r != null) return decodeURIComponent(r[2]);
    return null; //返回参数值
}
const baseUrl = 'https://xyy.macoolliving.com'
var vapp = new Vue({
	el : '#app',
	data: {
		uplodaUrl:'/api/common/upload',
		detailUrl: '/api/admin/store/order/view',
		submitUrl:'/api/admin/order/uploadPic',
		info:{
			order_no:1,
			consumer:{},
			pics:[]
		},
		index:0,
		idx:0
	},
	computed:{
		getNum(){
			return this.info.pics.length
		},
		getAllNum() {
			let num = 0
			this.info.pics.map(item=>{
				if(item.image.some(element => element.img !== '')) num += 1
			})
			return num
		}
	},
	created : function(){
		this.orderNo = getUrlParam('orderNo');
		this.token = getUrlParam('token')
		document.title = '录入衣物';
		this.getDetail(this.orderNo)
	},
	methods : {
		submit(){
			if(this.getNum !== this.getAllNum) return $('#message').fadeIn(100).delay(1000).fadeOut(100);
			let params = {
				orderNo: this.orderNo,
				pics:[]
			}
			this.info.pics.map(item=>{
				let config = {
					itemNo: item.item_no,
					pic:[]
				}
				item.image.map(demo=>{
					config.pic.push(demo.img)
				})
				params.pics.push(config)
			})
			$.ajax({
			    url: baseUrl+this.submitUrl,
			    type: 'POST',
				contentType: 'application/json', // 发送信息至服务器时内容编码类型
				data: JSON.stringify(params), // 将对象转换为JSON字符串作为发送数据
				dataType: 'json', // 预期服务器返回的数据类型
				headers:{
					token: this.token
				},
			    success: function(res) {
					if(res.code === 200 ){
						$('#message1').fadeIn(100).delay(2000).fadeOut(100);
					}
			    },
			});
		},
		addPics() {
			let configData = this.info
			configData.pics.push({image:[{img:''}]})
			vapp.$data.info = configData
		},
		addUPploadImage(index){
			let configData = this.info
			configData.pics[index].image.push({img:''})
			vapp.$data.info = configData
		},
		selectImage(index,idx) {
			vapp.$data.index = index
			vapp.$data.idx = idx
			document.getElementById('file').click()
		},
		uploadImage(e) {
			var file = e.target.files[0];
			var formData = new FormData();
			formData.append('file', file);
			$.ajax({
			    url: baseUrl+this.uplodaUrl,
			    type: 'POST',
				data:formData,
				processData: false,
				contentType: false,
				headers:{
					token: this.token
				},
				success: (res) => {
					let picUrl = baseUrl+res.data
					document.getElementById('file').reset()
					let configData = this.info
					configData.pics[this.index].image[this.idx].img = picUrl
					vapp.$data.info = configData
				}
			})
		},
		getDetail(num){
			$.ajax({
			    url: baseUrl+this.detailUrl+'?orderNo='+num,
			    type: 'GET',
			    dataType: 'json', // 指定返回数据的类型
				headers:{
					token: this.token
				},
			    success: function(res) {
			        // 请求成功时的回调函数
					// this.info = res.data
					let config = []
					res.data.detail && res.data.detail.map(item=>{
						config.push(item.cate_info.name)
					})
					if(!res.data.pics) {
						res.data.pics = [
							{image:{img:''}}
						]
					}else{
						res.data.pics.map(item=>{
							let configImage = []
							if(item.pic){
								item.pic && JSON.parse(item.pic).map(demo=>{
									configImage.push({img:demo})
								})
							}else{
								configImage.push({img:''})
							}
							item.image = configImage
						})
					}
					console.log(res.data)
					res.data.leibie = config.join(',')
					vapp.$data.info = res.data
					// this.info = Object.assign({}, this.info, {...res.data })
			    },
			});
		}
	}
});
</script>
</body>
</html>